import React, { Component } from "react";
import { Space, Form, Button,  Table as TableAntd } from 'antd';

import config from "src/commons/config-hoc";
import PageContent from "src/layouts/page-content";
import EditModal from './EditModal'

import "../role/style.less";
import {
    QueryBar,
    FormRow,
    FormElement,
    Table,
    Operator,
    Pagination
} from 'src/library/components';

const { Column, ColumnGroup } = TableAntd;

@config({
    path: "/user",
    title: "会员列表",
    ajax: true,
})
export default class SomePage extends Component {
    state = {
        loading: false, // 表格加载数据loading
        dataSource: [], // 表格数据
        deleting: false, // 删除中loading
        visible: false, // 添加、修改弹框
        id: null, // 需要修改的数据id
        loadingRoleMenu: false, // 查询角色权限 loading标识
        selectedKeys: [], // 角色对应的菜单
        selectedRoleId: undefined, // 当前选中角色
        currentPage: 1,         // 分页当前页
        total_num: 0,       // 分页每页显示条数
        selectedRowKeys: [],
        users: [],
        disabledDelete: false,
        formdata: {},
        keyword: '',
        status: ''
    };
    columns = [
        // { title: '#', dataIndex: 'id', width: 50 },
        { title: '用户名', dataIndex: 'app_id' },
        { title: '应用描述', dataIndex: 'app_description' },
        { title: '权限码', dataIndex: 'scope' },
        { title: '权限描述', dataIndex: 'scope_description' },
        {
            title: '操作', dataIndex: 'operator',
            // render: (id, row) => (
            //     <Space size="middle">
            //         <a onClick={() => {this.setState({id: row.id, formdata: row, visible: true})}}>修改 {row.app_id}</a>
            //         <a onClick={() => this.handleDelete(row.id)}>删除</a>
            //     </Space>
            // )
            render: (value, row) => {
                const items = [
                    {
                        label: `修改 ${row.app_id}`,
                        onClick: () => {this.setState({id: row.id, formdata: row, visible: true})},
                    },
                    {
                        label: '删除',
                        color: 'red',
                        confirm: {
                            title: `您确定删除"${row.app_id}"?`,
                            onConfirm: () => this.handleDelete(row.id),
                        },
                    },
                ];

                return <Operator items={items}/>;
            },
        },
    ];

    componentDidMount() {
        this.getUsers()
    }

    async getUsers() {
        console.log(this.form, 'this.form');
        const { keyword, status } = this.form.getFieldValue()
        let data = {
            keyword,
            status,
            page: this.state.currentPage
        }
        const res = await this.props.ajax.get('admin/adminUser/list', data, {noEmpty: true})
        if (res.code == 200) {
            this.setState({
                users: res.data.data,
                total_num: res.data.total,
            })
        }else{
            this.setState({
                users: [],
                total_num: 0,
                currentPage: 1
            })   
        }
    }
    
    handleDelete = async (id) => {
        if (this.state.deleting) return;

        this.setState({ deleting: true });
        const resp = await this.props.ajax.post('admin/adminUser/delete', {id}, { successTip: '删除成功！', errorTip: '删除失败！' })
        if (resp.code == 200) {
            this.getUsers()
        }
        this.setState({ deleting: false })

    };

    render() {
        const { loading, loadingRoleMenu, users, deleting, disabledDelete, selectedRowKeys, pageNum, pageSize, visible, id, formdata, total_num, currentPage } = this.state;
        
        const formProps = {
            width: 200,
        };
        return (
            <PageContent styleName="root" loading={loading || loadingRoleMenu}>
                <QueryBar>
                    <Form onFinish={() => this.setState({ pageNum: 1 }),() => this.getUsers()} ref={form => this.form = form}>
                        <FormRow>
                            <FormElement
                                {...formProps}
                                label="用户名"
                                name="keyword"
                            />
                            <FormElement
                                {...formProps}
                                type="select"
                                label="是否删除"
                                name="status"
                                options={[
                                    { value: 0, label: '已删除' },
                                    { value: 1, label: '正常' },
                                ]}
                            />
                            <FormElement layout>
                                <Button type="primary" htmlType="submit">提交</Button>
                                <Button onClick={() => {this.form.resetFields();this.getUsers()}}>刷新</Button>
                                <Button type="primary" onClick={() => this.setState({ visible: true, id: null })}>添加</Button>
                                {/* <Button danger loading={deleting} disabled={disabledDelete} onClick={this.handleBatchDelete}>删除</Button> */}
                            </FormElement>
                        </FormRow>
                    </Form>
                </QueryBar>
                
                {/* <Table dataSource={users}>
                    <Column title="#" dataIndex="id" key="id" />
                    <Column title="用户名" dataIndex="app_id" key="app_id" />
                    <Column title="应用描述" dataIndex="app_description" key="app_description" />
                    <Column title="权限码" dataIndex="scope" key="scope" />
                    <Column title="权限描述" dataIndex="scope_description" key="scope_description" />
                    <Column title="操作" key="delete_time" render={(row) => (
                        <Space size="middle">
                            <a>修改 {row.app_id}</a>
                            <a>删除</a>
                        </Space>
                    )}/>
                </Table> */}
                <Table
                    loading={loading}
                    columns={this.columns}
                    dataSource={users}
                    rowKey="id"
                    serialNumber
                    pageNum={total_num}
                    pageSize={10}
                />

                <EditModal
                    visible={visible}
                    id={id}
                    isEdit={id !== null}
                    onOk={() => this.setState({ visible: false }, () => this.getUsers())}
                    onCancel={() => this.setState({ visible: false })}
                    formdata={formdata}
                />

                <Pagination
                  total={total_num}
                  pageNum={currentPage}
                  pageSize={10}
                  onPageNumChange={page => {this.setState({currentPage: page}, () => {
                    this.getUsers()
                  })}}
                />
            </PageContent>
        );
    }
}
